<template>
  <el-drawer v-model="drawer" :title="'查看收集表:' + CollectPopupData.nickname" :with-header="true" custom-class="drawers" size="32%">
    <div class="slot"></div>

    <div class="drawer_content">
      <el-scrollbar class="scrool">
        <div class="mobile_box"  ref="containerRef">
          <!-- <div class="white_box"> -->
          <div class="product_pic">
            <el-image class="img_right" :src="CollectPopupData.headimgurl" style="width: 100%"> </el-image>
          </div>
        </div>
      </el-scrollbar>
      <!-- </div> -->
    </div>
    <template #footer>
      <el-button type="primary" @click="onExport">导出</el-button>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
 import html2canvas from 'html2canvas'
 import { statdetailList, viewcollectList, statexportList } from '@/api/highMaterial/collectionTable'
import { downloadByBlob } from '@/utils/utils'
interface Props {
  CollectPopupData: any
}

const props = withDefaults(defineProps<Props>(), {
  CollectPopupData: () => {
    return {
      data: []
    }
  }
})
const data=ref({})
const drawer = ref(false)
const containerRef = ref(null)
// const onExport = ()=>{
//   downloadByBlob(props.CollectPopupData.headimgurl, props.CollectPopupData.nickname)
// }
  // 合成图片的方法
  const onExport = (options = {}) => {
    // 设置放大倍数
    const scale = 1

    // 传入节点原始宽高
    const _width = containerRef.value.offsetWidth*2
    const _height = containerRef.value.offsetHeight*2
    // html2canvas配置项
    const ops = {
      scale,
      _width,
      _height,
      useCORS: true,
      allowTaint: false,
      ...options
    }
    console.log(ops,"opsopsopsopsops")
    return html2canvas(containerRef.value, ops).then((canvas) => {
      // 返回图片的二进制数据
      var pageData = canvas.toDataURL("image/png", 1.0); 
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = pageData;     
      link.setAttribute("download", '收集表' + ".png");
      document.body.appendChild(link);
      link.click(); 
    })
  }
defineExpose({ drawer })
</script>
<style lang="scss" scoped>
.slot {
  border-bottom: 1px solid #eaeaea;
  margin: -32px -16px 0;
}

.mobile_box {
  // height: calc(800px);
  // overflow: hidden;
  // overflow-y: scroll;
  // width: 70%;
  padding: 16px;
  border-radius: 25px;
  border: 1px solid #d2d8db;
  background-color: #f3fafb;
  margin: 0px auto;
  // .product_pic {
  //   display: flex;
  //   justify-content: center;
  // }
}
.drawer_content {
  // display: flex;
  height: calc(100% - 100px);
  position: relative;
  width: 50%;
  margin-left: 25%;
  margin-top: 40px;
  .scrool {
    height: 100%;
    position: absolute;
    width: 100%;
    // margin-top: 40px;
  }
}
</style>
